<script setup lang="ts">
import {getChannelListAPI} from '../api/channel'
import { ref } from 'vue';
import { ChannelList } from '../types/index'

const list = ref<ChannelList>([])

const getChannel = async () => {
  const res = await getChannelListAPI()
  console.log('分类频道',res)
  list.value = res.data.channels
}

getChannel()

defineProps<{
  activeId: number
}>()

const emit = defineEmits<{
  (name: 'update:activeId', id: number): void
}>()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <!-- 这里是子组件跟父组件的双向影响,
      父组件的activeId 影响这里的高亮class
      这里的点击事件可以通知父组件的 activeId 进行变更 -->
      <a
        class="item"
        :class="{ active: item.id === activeId }"
        @click="emit('update:activeId', item.id)"
        href="javascript:;"
        v-for="(item) in list"
        :key="item.id"
      >
        {{item.name}}
      </a>
    </nav>
  </div>
</template>